import { createApp } from 'vue'
import { Quasar } from 'quasar'
import '@quasar/extras/material-icons/material-icons.css'
import 'quasar/src/css/index.sass'
import { createPinia } from 'pinia'
import App from '@/App.vue'
import router from '@/router'

// 全局样式
import '@/styles/var.scss'
import '@/styles/mixin.scss'
import '@/styles/common.scss'
import '@/styles/animate.min.scss'

const app = createApp(App)
app.directive('formatyear', {
  mounted(el) {
    const date = new Date(el.textContent)
    el.textContent = date.getFullYear()
  },
})
app.directive('formatmonth', {
  mounted(el) {
    const date = new Date(el.textContent)
    el.textContent = date.toLocaleString('en', { month: 'long' }).slice(0, 3)
  },
})
app.directive('formatday', {
  mounted(el) {
    const date = new Date(el.textContent)
    el.textContent = date.getDay()
  },
})

app
  .use(createPinia()) // 启用 Pinia
  .use(router)
  .use(Quasar, {
    plugins: {},
  })
  .mount('#app')
